<template>
  <a-modal v-model:visible="showModal" :mask-closable="false" title="添加用户缴费" width="80vw" unmount-on-close>
    <addFees ref="addFeesRef" mode="modal" @close="onClose" v-model:value="okLoading" />
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { ref } from 'vue'
  import { Notification } from '@arco-design/web-vue'
  import addFees from '../../add-fees.vue'

  const emits = defineEmits(['ok'])

  const showModal = ref(false)
  const okLoading = ref(false)
  const addFeesRef = ref()

  const show = () => {
    showModal.value = true
  }

  const onClose = () => {
    okLoading.value = false
    showModal.value = false
  }
  const onConfirm = () => {
    addFeesRef.value.submitFn(() => {
      Notification.success({
        content: '保存成功',
        closable: true,
        duration: 3000,
      })
      emits('ok')
    })
  }

  defineExpose({
    show,
  })
</script>
